import React, { Component } from 'react'
import { SearchBar, Grid, Tag,Tabs } from 'antd-mobile'
import Logo from '../../assets/img/logo2.png'
import Nav from '../../assets/img/nav.png'

import yubuy1 from '../../assets/img/yubuy1.png'
import yubuy2 from '../../assets/img/yubuy2.png'
import yubuy3 from '../../assets/img/yubuy3.png'

import './home.less'
import Newhav from './components/Newhav/Newhav'
import Wanpople from './components/Wanpople/Wanpople'
import Onlytime from './components/Onlytime/Onlytime'
import Goods from './components/Goods/Goods'

import {reqNewhave,reqwantuan,reqtime,reqgoods} from '../../request/api'


import {connect} from 'react-redux'
import { actions, getN, getNewhav, getOnlyTime, getWanpople, showGoods } from '../../store/mouble/home'
import { bindActionCreators } from 'redux'
 class Home extends Component {
  // constructor(){
  //   super()
  //   this.state={
  //      newhav:[],//新人专享
  //      wanpople:[],//万人团
  //      onlytime:[],//秒杀
  //      goods:[],//商品信息
  //      n:0
  //   }
  // }
  componentDidMount(){
    let {homeFn:{requestNewhav,requestWanpople,requestOnlytime,requestGoods}}=this.props;
    // 新人专享
    requestNewhav();
    // 万人团
    requestWanpople();
    // 限时秒杀
    requestOnlytime();
    // 商品信息
    requestGoods()
  }
  render() {
   console.log(this.props);
   let {newhav,wanpople,onlytime,showGoods,n ,homeFn:{changeN}}=this.props
    return (
      <div>
        {/* {JSON.stringify(newhav)} */}
        <div className='Header'>
          <span className='logo'>
            <img src={Logo} alt="" />
          </span>
          <div className='seach'>
            <SearchBar
              placeholder='请输入内容'

              style={{
                '--border-radius': '100px',
                '--background': '#ffffff',
                '--height': '32px',
                '--padding-left': '12px',
              }}
            />
          </div>
          <div className='icon'>
            <img src={Nav} alt="" />
          </div>
        </div>
       <Newhav newhav={newhav}></Newhav>
       <Wanpople wanpople={wanpople}></Wanpople>
        <Onlytime onlytime={onlytime}></Onlytime>
        <div className='buy'>
        <Tabs
          activeLineMode='fixed'
          style={{
            '--fixed-active-line-width': '20px',
          }}
        >
          <Tabs.Tab title='双十一预购' key='1'>
          <img src={yubuy1} alt="" />
          </Tabs.Tab>
          <Tabs.Tab title='畅购全球' key='2'>
          <img src={yubuy2} alt="" />
          <img src={yubuy3} alt="" />
          </Tabs.Tab>
         
        </Tabs>
        </div>
        <Goods showGoods={showGoods} n={n} changeN={changeN}></Goods>
      </div>
    )
  }
}
const mapStateToProps=(state)=>{return{
   newhav:getNewhav(state),//新人专享
   wanpople:getWanpople(state),//万人团
   onlytime:getOnlyTime(state),//限时秒杀
   showGoods:showGoods(state),//显示商品数据
   n:getN(state)
}}
const mapDispatchToProps=(dispatch)=>{return{
    homeFn:bindActionCreators(actions,dispatch)
}}
export default connect(mapStateToProps,mapDispatchToProps)(Home)